@import "mixins/arrow";
body {
  font-size: 16px;
  overflow-x: hidden;
  background: #fff;
}
//
// 公共实用
//
.u-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//防止弹出层上下滑页面跟着滑动
.mask-lazy {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width:100%;
}
.remove-mask {
  overflow: auto;
  position: static;
  height: auto;
  width: auto;
}
.u-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.u-brand-box-top {
  margin-top: .3rem;
}
.u-letter-box-top {
  margin-top: .3rem;
}
.u-letter-box-letf-10 {
  margin-left: 10%;
}
.u-border-1px {
  border-bottom: 1px solid rgba(202, 212, 216, 0.5);
}

.u-arrows {
  position: absolute;
  top: 50%;
  border: 1px solid #333;
  border-top-width: 0;
  border-left-width: 0;
  transform: translateY(-50%) rotate(45deg);
  width: .21rem;
  height: .21rem;
}

.u-arrows-down {
  position: absolute;
  top: 50%;
  border: 1px solid #333;
  border-top-width: 0;
  border-left-width: 0;
  transform: translateY(-50%) rotate(45deg);
  width: .21rem;
  height: .21rem;
}

.u-arrows-right {
  position: absolute;
  top: 50%;
  border: 1px solid #333;
  border-bottom-width: 0;
  border-left-width: 0;
  transform: translateY(-50%) rotate(45deg);
  width: .21rem;
  height: .21rem;
}


// cell 组件样式重置 保费
.ui-cell .premium__title.isWidth {
  font-size: .32rem;
  color: #333;
  width: 42%;
}
.ui-cell .premium__label.isWidth {
  width: 42%;
  font-size: .28rem;
  color: #666;
}

@transition-time: .2s;
.collapse-transition {
  transition: @transition-time height ease-in-out,@transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out, opacity .3s;
  // transform: translateY(100%);
  // opacity: 1;
}

.mint-indicator-mask, .mint-indicator-wrapper {
  z-index: 2004;
}
// header  后退
.c-header-back {
  width: .25rem;
  height: .25rem;
  left: 4%;
  position: absolute;
  top: 50%;
  border: 3px solid #ffffff;
  border-top-width: 0;
  border-right-width: 0;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  z-index: 20;
}


// cell-header 公共部分
.carinfo {
  // header
  &-wrap {
    display: flex;
    align-items: center;
  }
  &-header {
    background: #fff;
    padding: 0;
    padding-left: 4%;
    height: 1.64rem;
    border-bottom: 1px solid #efeff4;
    display: flex;
    align-items: center;
    &-back {
      width: .25rem;
      height: .25rem;
      left: 4%;
      position: absolute;
      top: 50%;
      border: 3px solid #ffffff;
      border-top-width: 0;
      border-right-width: 0;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(45deg);
      z-index: 20;
    }
  }
  &-media {
    &__image {
      width: 1.34rem;
      height: 1.34rem;
      border-radius: 100%;
    }
    &__body {
      padding-left: 12%;
      font-size: .36rem;
      padding-right: 4%;
      display: flex;
      align-items: center;
      &.carinfo-media__body--padding-left-9 {
        padding-left: 9%;
      }
      h2 {
        color: #333;
        font-size: .36rem;
        line-height: 1.2;
      }
      p {
        font-size: .32rem;
        line-height: 1.4;
      }
    }
    &__heading {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
      font-size: .36rem;
      line-height: 1.2;
      padding: 0;
      text-align: left;
    }
    &__title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &--color-black {
        color: #333;
      }
      &--color-gray {
        color: #666;
      }
    }
    &__arrow {
      width: .25rem;
      height: 100%;
      position: relative;
      span {
        position: absolute;
      }
    }
  }

  // 标语
  &-propaganda {
    display: flex;
    align-items: center;
    &-wrap {
      height: 1rem;
      width: 94%;
    }
    &__btn {
      color: #4a90e2;
    }
    p {
      font-size: .26rem;
      color: #666;
    }
    &__hint {
      width: 6.7rem;
      height: .4rem;
      line-height: .4rem;
      font-size: .24rem;
      margin: 0 auto;
      text-align: center;
      border-radius: .4rem;
      background: #fff4f4;
      color: #ff5a51;
    }
  }

  // cell
  &-card {
    box-shadow: 0 0 0 0;
    border-radius: 0;
    &__item {
      padding: 0;
      height: .9rem;
      &--width-94 {
        width: 94%;
      }
    }
  }

  &-grid {
    flex: 1;
    align-items: center;
    height: inherit;
    padding-left: .1em;
    &-heading {
      .carinfo-grid-icon {
        width: .5rem;
        height: 100%;
      }
    }
    &__heading{
      &-box {
        display: flex;
        justify-content: space-between;
        padding: 0;
        font-size: .32rem;
        .heading-box-text {
          color: #333;
        }
        .heading--color-red {
          color: #f76464;
        }
      }
    }

    &__body {
      &-box {
        display: flex;
        justify-content: flex-end;
        padding: 0;
      }
      &-date {
        display: flex;
        position: relative;
      }
      &-arrow {
        position: relative;
        width: .25rem;
        height: 100%;
        .icon-eye {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          width: .3rem;
          height: .14rem;
          background-image: url(../images/eye_close.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          &.has-open {
            height: .24rem;
            background-image: url(../images/eye_open.png);
          }
        }
      }
    }
    &__cell {
      padding: 0;
      display: flex;
      align-items: center;
      &-container {
        display: flex;
        flex: 1;
        align-items: center;
      }
      &-icon {
        display: inline-block;
        background-color: #fff;
        border-radius: 100%;
        width: .36rem;
        height: .36rem;
        background: url(../images/radio_false.png) no-repeat;
        background-size: 100% auto;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        &.has-active {
          background-image: url(../images/radio_true.png);
        }
      }
      &--width-8{
        flex: 0 0 8%;
        max-width: 8%;
        width: 8%;
      }
      &--width-10{
        flex: 0 0 10%;
        max-width: 10%;
        width: 10%;
      }
      &--width-25 {
        flex: 0 0 25%;
        max-width: 25%;
      }
      &--width-32 {
        flex: 0 0 32%;
        max-width: 32%;
      }
      &--width-36 {
        flex: 0 0 36%;
        max-width: 36%;
      }
      &--width-40 {
        flex: 0 0 40%;
        max-width: 40%;
      }
      .carinfo-grid-kindName {
        color: #333;
        font-size: .28rem;
        &.detatil {
          margin-left: .3rem;
          color: #4a90e2;
        }
      }
      .carinfo-grid-premium {
        font-size: .2rem;
        color: #f76464;
      }
      label {
        font-size: .32rem;
        line-height: 1.2;
        color: #333;
      }
      input {
        font-size: .32rem;
        width: 100%;
        line-height: 1.2;
        color: #333;
        border: 0;
        padding: 0;
        resize: none;
        &:focus {
          border-color: transparent;
          box-shadow: 0 0 0 0;
        }
        &::-webkit-input-placeholder {
          color: #bbb;
          font-size: .32rem;
        }
        &::-moz-placeholder{
          color: #bbb;
          font-size: .32rem;
        }
        &::-moz-placeholder{
          color: #bbb;
          font-size: .32rem;
        }
        &::-ms-input-placeholder{
          color: #bbb;
          font-size: .32rem;
        }
      }
      &-camera {
        justify-content: flex-end;
      }
      &-sign,
      &-coverage {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }
      &-sign {
        display: flex;
        flex: 1;
        position: relative;
        height: .32rem;
        width: 100%;
        .sign-mark {
          height: .22rem;
          width: .42rem;
          position: absolute;
          // top: -0.2rem;
          display: inline-block;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg) translate(-10%,-50%);
          overflow: hidden;
          &:before,
          &:after {
              content: "";
              position: absolute;
              border-radius: 2px;
              background: #999;
          }
          &:before {
              width: 2px;
              height: .2rem;
              left: 0;
          }
          &:after {
              width: .4rem;
              height: 2px;
              bottom: 0;
              left: 0;
          }
          &.active {
              &:before,
              &:after {
                  content: "";
                  background: #f76464;
              }
          }
        }
      }
      &-coverage {
        display: flex;
        flex: 1;
        flex-direction: column;
      }
    }
    &__text {
      font-size: .32rem;
      width: 100%;
      line-height: 1.2;
      min-height: .32rem;
      color: #333;
      word-break:break-all;
      // white-space: nowrap;
    }

    &__arrow {
      right: .2rem;
    }
    &__camera {
      display: inline-block;
      background: url(../images/icon_ocr.jpg) no-repeat;
      background-size: 100% auto;
      &--box {
        width: .48rem;
        height: .38rem;
      }
      .file {
        opacity: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  &-button {
    font-size: .24rem;
    padding: .18rem .38rem;
    border-radius: 6px;
    color: #dcdcdc;
    border: 1px solid #dcdcdc;
    background: #fff;
    display: inline-block;
    &:first-child {
      margin-right: .4rem;
    }
    &.checked {
      color: #fe5958;
      border: 1px solid #fe5958;
    }
    &-wrap {
      width: 92%;
      margin-top: .3rem;
      margin-bottom: .3rem;
    }
    &--submit {
      background-color: #fe5958;
      color: #fff;
    }
    &--block {
      width: 100%;
      font-size: .36rem;
      padding: .28rem 0;
      outline: none;
      text-align: center;
      border-radius: 6px;
      color: #fff;
      border: 0;
      margin: 0;
      display: block;
    }
  }
  // 底部客服
  &-line {
    font-size: .3rem;
    line-height: .38rem;
    display: inline-block;
    padding: 0 4%;
    margin-bottom: .5rem;
    color: #4a90e2;
    &::before {
      content: "";
      display: inline-block;
      width: .34rem;
      height: .38rem;
      background: url(../images/kefu.png) no-repeat;
      background-size: 100% 100%;
      vertical-align: middle;
      margin-right: .2rem;
    }
  }
}
